<template>
  <n-carousel show-arrow :loop="false" :on-update:current-index="onChange">
    <div v-for="(data, index) in pageValue" :key="data.id" class="light-green">
      <n-grid :cols="1">
        <n-gi>
          <n-tag type="success" class="nTag"> {{ data.topic }} </n-tag><br />
          <n-space class="nspace">
            <n-radio
              v-model:value="pageValue[index].typeA"
              :checked="checkedValue[index] === pageValue[index].typeA"
              @change="handleChange(pageValue[index].typeA, index)"
            >
              {{ data.typeA }}
            </n-radio>
          </n-space>
          <n-space class="nspace">
            <n-radio
              v-model:value="pageValue[index].typeB"
              :checked="checkedValue[index] === pageValue[index].typeB"
              @change="handleChange(pageValue[index].typeB, index)"
            >
              {{ data.typeB }}
            </n-radio>
          </n-space>
          <n-space class="nspace">
            <n-radio
              v-model:value="pageValue[index].typeC"
              :checked="checkedValue[index] === pageValue[index].typeC"
              @change="handleChange(pageValue[index].typeC, index)"
            >
              {{ data.typeC }}
            </n-radio>
          </n-space>
          <n-space class="nspace">
            <n-radio
              v-model:value="pageValue[index].typeD"
              :checked="checkedValue[index] === pageValue[index].typeD"
              @change="handleChange(pageValue[index].typeD, index)"
            >
              {{ data.typeD }}
            </n-radio>
          </n-space>
          <n-button strong secondary type="primary" class="nbutton" @click="watchParse">
            查看解析 </n-button
          ><n-button
            strong
            secondary
            type="primary"
            class="nbutton"
            @click="deleteWrongRecord(data.id)"
          >
            从错题本中删除 </n-button
          ><br />
          <n-input
            v-if="showParse == true"
            v-model:value="data.parse"
            type="textarea"
            placeholder=""
            readonly="true"
            class="nspace"
          >
          </n-input>
          <!-- <n-tag v-if="showParse == true" class="nspace"> {{ data.parse }} </n-tag> -->
        </n-gi>
      </n-grid>
    </div>
  </n-carousel>
</template>

<script setup lang="ts">
  import { onMounted, ref, reactive } from 'vue'
  import { NCarousel, NGrid, NGi, NTag, NRadio, NSpace, NButton, useMessage } from 'naive-ui'
  import store from '../../store/wrongRecord/index'

  const wrongStore = store()
  const pageValue = ref()
  let checkedValue = reactive([] as any[])
  const showParse = ref(false)
  const message = useMessage()

  /**mounted生命周期 */
  onMounted(() => {
    wrongStore.getWrongRecords().then(({ data }) => {
      pageValue.value = data
    })
  })

  const handleChange = (val: any, index: any) => {
    checkedValue[index] = val
  }
  //查看解析
  const watchParse = () => {
    showParse.value = true
  }
  //切换下一题时，隐藏解析
  const onChange = () => {
    showParse.value = false
  }
  //从错题本中逻辑删除
  const deleteWrongRecord = (id: number) => {
    wrongStore.deleteById(id).then(({ data }) => {
      if (data) {
        message.success('删除成功')
      } else {
        message.error('删除失败')
      }
    })
  }
</script>
<style scoped>
  .light-green {
    width: 100%;
    height: 520px;
    background-color: rgba(0, 128, 0, 0.12);
  }
  .n-carousel /deep/ .n-carousel__arrow {
    color: black;
  }
  .n-carousel.n-carousel--show-arrow.n-carousel--bottom /deep/ .n-carousel__dots {
    display: none;
  }
  .nTag {
    margin-left: 50px;
    margin-top: 50px;
  }
  .nspace {
    margin-left: 50px;
    margin-top: 20px;
    width: 90%;
  }
  .nbutton {
    margin-left: 50px;
    margin-top: 20px;
  }
</style>
